<template>
    <div>
        <div class="crumbs">
            <div class="contentbox">
                <div class="contentsize">文件上传</div>
                <div>
                    <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="addtitle">文件上传</div>
            <el-form ref="form" :model="form" label-width="auto" :inline="true">
                <el-form-item label="文件类型:" prop="xcjg">
                    <el-cascader
                                :options="yjlxlist"
                                :show-all-levels="false"
                                v-model="yjlx"
                                placeholder="请选择文件类型"
                                :props="{ checkStrictly: true }"
                    ></el-cascader>
                    <!-- <el-select v-model="form.yjlx" placeholder="请选择文件类型" style="width: 100%;">
                        <el-option v-for="item in yjlxlist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select> -->
                </el-form-item>
                <el-form-item label="文件名称:" prop="xcjl">
                    <el-input placeholder="请输入文件名称" v-model="form.yjbz" style="width: 100%;"></el-input>
                </el-form-item>
                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'" :on-remove="handleRemoves"
                    :before-remove="beforeRemoves" multiple :on-success="handelfilesuccess" :headers="myHeaders"
                    :file-list="filefileList">
                    <div class="unloadTitle">附件</div>
                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                </el-upload>


            </el-form>
            <div style="width: 220px;margin: auto;">
                <el-button type="primary" @click="submitForm">上传</el-button>
                <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
            </div>

            <el-table :data="tableData" style="width: 100%;margin: 30px auto 0;" border>
                <el-table-column prop="dabh" label="文件类别" align="center"> </el-table-column>
                <el-table-column prop="qs" label="文件名称" align="center"> </el-table-column>
                <el-table-column prop="fwdz" label="上传日期" align="center"> </el-table-column>
                <el-table-column prop="lh" label="备注" align="center"> </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="deleteClick(scope.row)"
                            style="color: red">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination" style="float: right">
                <el-pagination background layout="total,prev, pager, next,jumper" :total="total" :current-page.sync="current"
                    :page-size="pageSize" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { builddetail, download } from '@/api/index';
import fileType from "../vo/filetype";
import valueList from '@/components/common/valueList.vue'
import global from '@/components/common/httpurl.vue'
export default {
    name: 'yaojianlist',
    data() {
        return {
            yjlx:[],
            yjlxlist: valueList.yjlxlist,//是否列表
            myHeaders: {
                'token': localStorage.getItem('token')
            },
            filefileList: [],
            httpUrl: global.httpUrl,//公共地址
            form: {
                yj: ''
            },
            projectdetail: {},
            fileList: [],
            fileType: fileType,
            tableData: [],
            total: 0,
            current: 1,
            pageSize: 10,
        };
    },
    methods: {
        // 换页
        handleCurrentChange(val) {
            this.current = val;
            this.form.current = val;
            this.buildlist(this.form);
            console.log(val);
        },
        // 返回上一页
        backForm() {
            this.$router.go(-1);
        },
        // 楼幢详情
        builddetail(data) {
            builddetail(data).then((res) => {
                this.projectdetail = res.data;
                console.log(this.projectdetail.fj)
            });
        },
        // 下载文件
        downloadfile(id, name, type) {
            console.log(id)
            let filetype = fileType[type];
            let data = {
                fileid: id
            }
            download(data).then(res => {
                const link = document.createElement('a');
                let blob = new Blob([res], {
                    type: filetype
                });
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = name;
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res)
            })
        },
        // 文件
        handleRemoves(file, fileList) {
            console.log(fileList)
            this.fileListshandle = fileList.map((res) => {
                return res.response.data.id;
            });
            this.form.fj = this.fileListshandle.toString()
        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file)
            console.log(fileList)
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        handelfilesuccess(response, file, fileLists) {
            console.log(fileLists)
            this.$message.success('导入成功');
            this.fileListshandle = fileLists.map((res) => {
                console.log(res.response.data)
                return res.response.data.id;
            });
            this.form.fj = this.fileListshandle.toString()
        },
        // 删除
        deleteClick(e) {
            console.log(e);
            this.$confirm('确定删除此条文件吗？')
                .then(() => {
                    let data = { id: e.id };
                    builddelete(data).then((res) => {
                        if (res.code == 200) {
                            this.buildlist(this.form);
                            this.$message.success('删除成功');
                        }
                    });
                })
                .catch(() => {
                    this.$message.success('删除取消');
                });
        },
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
    },
    mounted() {
        let data = {
            id: this.$route.params.id
        };
        this.builddetail(data);
    }
};
</script>
<style>
.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: auto;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>
<style scoped>
/* 选择意见 */
.xzyj {
    width: 48%;
    height: 110px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 10px 0;
    box-sizing: border-box;
}

.xzyj .xzyjitem {
    text-align: left;
    cursor: pointer;
    line-height: 24px;
}

table {
    width: 70%;
    margin: auto;
    text-align: center;
}

.table-1 {
    border: 1px solid #c0c0c0;
    border-collapse: collapse;
    /*合并相邻表格的间距*/

}

.table-1 tr,
.table-1 td {
    font-size: 13px;
    border-collapse: collapse;
    border: 1px solid #c0c0c0;
    padding: 10px;
    box-sizing: border-box;
    color: #606266;
}

.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    font-weight: 700;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}

.detailcontent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.detailcontent .detailitem {
    /* float: left; */
    width: 33%;
    margin-bottom: 30px;
}

.detailcontent .detailitem1 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
    font-weight: 700;
    color: #008A94;
}

.detailcontent .detailitem2 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
}

/* 项目文件 */
.filebox {
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}

.fileboxitem:hover {
    color: #7090ff;
}

.deleteitem {
    color: red;
}

.deleteitem:hover {
    color: #eeeeee;
}
</style>